<template>
  <div>
    <v-btn
      :disabled="!isDocumentQualitySelected"
      class="text-capitalize"
      outlined
      @click="dialog = true"
    >
      质检完成
    </v-btn>
    <v-dialog v-model="dialog" width="800">
      <confirm-form
        title="标注合格"
        message="你确定这些标注合格吗?"
        @ok="handleDeleteDocument"
        @cancel="dialog = false"
        buttonTrueText="确定"
        buttonFalseText="取消"
      />
    </v-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import DocumentService from '@/services/document.service'
import ConfirmForm from '@/components/organisms/utils/ConfirmForm'

export default {
  components: {
    ConfirmForm
  },

  data() {
    return {
      dialog: false,
      data: [],
      arr: [],
      arrAll: [],
      arrUnSelect: [],
      row: []
    }
  },

  computed: {
    ...mapState('documents', ['qualitySelected', 'qualityItems', 'arrQualityItems']),
    ...mapGetters('documents', ['isDocumentQualitySelected'])
  },
  watch: {
    qualitySelected: {
      handler(val) {
        this.row = val
      },
      immediate: true
    }
  },
  methods: {
    ...mapMutations('documents', ['resetQuatilySelected']),
    ...mapActions('documents', ['deleteDocument', 'getQualityItems']),

    async handleDeleteDocument() {
      const mapItem = this.arrQualityItems
      this.row.forEach((item) => {
        this.arr.push(item.documentId)
        mapItem.delete(item.documentId)
      })
      this.arrUnSelect = [...mapItem.values()]
      let data = await DocumentService.qualityRollBack({
        projectId: this.$route.params.id,
        documentId: this.arr,
        userId: localStorage.getItem('userId'),
        opType: 2
      })
      data = await DocumentService.qualityRollBack({
        projectId: this.$route.params.id,
        documentId: this.arrUnSelect,
        userId: localStorage.getItem('userId'),
        opType: 1
      })
      this.row = []
      this.arrUnSelect = []
      this.arr = []
      this.resetQuatilySelected()
      await this.getQualityItems({
        projectId: this.$route.params.id,
        q: '',
        limit: 10,
        offset: 0,
        startTime: '',
        endTime: '',
        qualityStatus: this.item
      })
      // this.$emit('refresh', table.data.results)
      this.$emit('query', ['', '', this.item])
      this.$emit('succ', data.data.code)
      this.dialog = false
    }
  }
}
</script>
